@import "./cdkey";
@import "./everyday";

#signin{
    width: 100%;
    height: 12.94rem;
    background: url("https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/background_lottery.png");
    background-size: 100% 100%;
    
    overflow: hidden;
    .top{
        margin-top: 4.3rem;
        height: .6rem;
        font: .3rem/.6rem "微软雅黑";
        color: #fff;
        padding: 0 .4rem;
        .count{
            float: left;
        }
        .ruleT{
            float: right;
            height: .6rem;
            width: 1.16rem;
            background: url("https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/rule_button@2x.png");
            background-size: 100% 100%;
            text-align: center;
            position: absolute;
            top: .2rem;
            left: 80%;
        }
        .rule{
            float: right;
            height: .51rem;
            width: 1.5rem;
            background: rgba(255, 255, 255, 0.36);
            color:#ffffff;
            border-radius:.25rem;
            text-align: center;
            line-height: .51rem;
        }
    }
    
    .pan{
        width: 6rem;
        height: 6rem;
        position: relative;
        margin: 0 auto;
        .back{
            background:url("https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/turntable.png");
            background-size:100% 100%;
            transition: all 5s;
            transform: rotate(0);
            width: 6rem;
            height: 6rem;
            .one{
                font-size: .3rem;
                color: #ffffff;
                position: absolute;
                top: 1.65rem;
                left: 2.07rem;
                transform-origin: center;
                transform: rotate(-30deg);
                span{
                    font-size:.22rem;
                }
            }
            .two{
                font-size: .36rem;
                color: #ffffff;
                position: absolute;
                top: 2.77rem;
                left: 1.28rem;
                transform-origin: center;
                transform: rotate(-90deg);
            }
            .three{
                font-size: .36rem;
                color: #ffffff;
                position: absolute;
                top: 4.1rem;
                left: 1.95rem;
                transform-origin: center;
                transform: rotate(-150deg);
                span{
                    font-size:.22rem;
                }
            }
            .four{
                font-size: .36rem;
                color: #ffffff;
                position: absolute;
                top: 2.73rem;
                left: 4.25rem;
                transform-origin: center;
                transform: rotate(90deg);
                span{
                    font-size:.22rem;
                }
            }
            .five{
                font-size: .28rem;
                color: #ff9735;
                position: absolute;
                top: 1rem;
                left: 3.6rem;
                transform-origin: center;
                transform: rotate(30deg);
            }
        }
        .ground{
            background:url("https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/turntable_index.png");
            background-size:100% 100%;
            width: .8rem;
            height: 1rem;
            position: absolute;
            top: -.42rem;
            left: 2.6rem;
            z-index: 100;
        }
        .click{
            background:url("https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/lottery_button.png");
            background-size:100% 100%;
            width: 1.74rem;
            height: 1.74rem;
            position: absolute;
            top: 2.14rem;
            left: 2.14rem;
            z-index: 100;
        }
    }
    
    .per{
        font: .28rem/.48rem "微软雅黑";
        color: #e6e6e6;
        height: .48rem;
        width: 2rem;
        border-radius: .25rem;
        border: 1px solid #e6e6e6;
        margin: .5rem auto 0;
        text-align: center;
    }
    
    
    .rule-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        .ruler{
            position: fixed;
            top: 1.5rem;
            left: .6rem;
            height: 6.6rem;
            width: 6.3rem;
            background: #fea65a;
            border-radius: .3rem;
            color: #fff;
            overflow: hidden;
            font: .28rem "\5FAE\8F6F\96C5\9ED1";
            p{
                padding: 0 .44rem;
            }
            p:nth-child(1){
                text-align: center;
                font: .36rem "微软雅黑";
                margin: .4rem 0 .34rem;
                span{
                    display: inline-block;
                    vertical-align: middle;
                    height: .16rem;
                    width: .16rem;
                    border-radius: .08rem;
                    background: #fff;
                }
            }
            p:nth-child(2){
                margin-bottom: .2rem;
            }

            p:nth-child(6){
                margin-bottom: .25rem;
            }
            button{
                height: .82rem;
                width: 2.5rem;
                font-size: .4rem;
                border-radius: .1rem;
                background: #fff;
                color: #E18b40;
                position: absolute;
                left: 0;
                right: 0;
                bottom: .55rem;
                margin: 0 auto;
            }
        }
    }
    
    .coupon-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        .coupon{
            position: absolute;
            left: .43rem;
            bottom: 3rem;
            width: 6.64rem;
            img:nth-child(1){
                width: 100%;
            }
            img:nth-child(2){
                width: 5.1rem;
                height: .98rem;
                position: absolute;
                left: .77rem;
                bottom: .78rem;
            }
            img:nth-child(3){
                height: .98rem;
                
                position: absolute;
                bottom: 3.6rem;
                left: 2.11rem;
            }
            img.ten{
                left: 1.95rem;
            }
        }
    }
    .red-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        img:nth-child(1){
            position: absolute;
            top: 3.96rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            
            height: 5.84rem;
            width: 5.64rem;
        }
        img:nth-child(2){
            position: absolute;
            top: 8.28rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            
            height: .86rem;
            width: 4.6rem;
        }
        div{
            font-size: .9rem;
            color: #fbfaa6;
            font-family: "微软雅黑";
            text-align: center;
            position: absolute;
            top: 5.98rem;
            left: 0;
            width: 100%;
            span{
                font-size: 1.1rem;
            }
        }
    }
    
    
    .code-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        img:nth-child(1){
            position: absolute;
            top: 3.06rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 6.76rem;
            width: 5.64rem;
        }
        img:nth-child(2){
            position: absolute;
            top: 3.7rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 2.4rem;
        }
        div:nth-child(3){
            font: .3rem "微软雅黑";
            color: #fff;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 6.2rem;
        }
        div:nth-child(4){
            font: .46rem "微软雅黑";
            color: #fff;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 8.4rem;
            p:nth-child(2){
                font-size: .2rem;
            }
        }
        img:nth-child(5){
            position: absolute;
            right: .9rem;
            top: 2.24rem;
            height: .64rem;
            width: .64rem;
        }
    }
    .opaction{
        width:100%;
        height: inherit;
        background:rgba(0,0,0,.7);
        position:absolute;
        top:0;
        z-index:999;
    }
    .textOpac{
        width:6rem;
        height: 3.4rem;
        background:white;
        position: absolute;
        top: 27%;
        left: 10%;
        border-radius:.24rem;
        z-index: 10000;
        p{
            font-size:.22rem;
            color:#646464;
            text-align: center;
            padding: .32rem;
        }
    }
    .voucher{
        width: 5.8rem;
        height: 5.6rem;
        background: url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/coupon_c.png) no-repeat;
        background-size: 5.8rem 5.6rem;
        position: absolute;
        top: 2.4rem;
        left: .85rem;
        z-index: 1000;
        p{
            font-size:.3rem;
            color:#9948c3;
            text-align: center;
            margin-top:.74rem;
        }
        .allD{
            display: flex;
            margin-top: 2.78rem;
            .left{
                margin-left: .7rem;
                text-align: center;
                .money{
                    font-size:.24rem;
                    color:#9948c3;
                    span{
                        font-size:.50rem;
                    }
                }
                .man{
                    font-size:.18rem;
                    color:#646464; 
                }
            }
            .right{
                margin-left: .65rem;
                .tops{
                    font-size:.24rem;
                    color:#323232;
                }
                .center{
                    font-size:.2rem;
                    color:#969696;
                }
                .bott{
                    font-size:.18rem;
                    color:#969696;
                }
            }
        }
        }
    .redBag{
        width: 5.18rem;
        height: 5.62rem;
        background: url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/redenvelope_e.png) no-repeat;
        background-size: 5.18rem 5.62rem;
        position: absolute;
        top: 2.4rem;
        left: 1.16rem;
        z-index: 1000;
        .ps{
            font-size:.62rem;
            color:#d3132a;
            text-align:center;
            margin-top: 1.6rem;
            span{
                font-size:.94rem;
                font-weight: bold;
            }
        }
        .supr{
            text-align:center;
            font-size:.32rem;
            color:#fdd96e;
            margin-top: 1.32rem;
        }
        .look{
            text-align:center;
            font-size:.24rem;
            color:#ffffff;
            margin-top: .33rem;
        }
    }
    .kanB{
        width: 5.4rem;
        height: 5.4rem;
        background: url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/gold_winning.png) no-repeat;
        background-size: 5.4rem 5.4rem;
        position: absolute;
        top: 2.4rem;
        left: 1.05rem;
        z-index: 1000;
        .tSuri{
            font-size:.5rem;
            color:#ffffff;
            text-align:center;
            margin-top: .5rem;
            margin-left: .25rem;
        }
        .text{
            font-size:.3rem;
            color:#ffffff;
            text-align:center;

        }
        .how{
            font-size:.76rem;
            color:#ffffff;
            text-align:center;
            margin-top:1rem;
        }
        .whats{
            font-size:.3rem;
            color:#ffffff;
            text-align:center;

        }
        
    }
    .thanks{
        width: 5.18rem;
        height: 5.62rem;
        background: url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/redenvelope_f.png) no-repeat;
        background-size: 5.18rem 5.62rem;
        position: absolute;
        top: 2.4rem;
        left: 1.16rem;
        z-index: 1000;
        .oh{
            font-size: .32rem;
            color: #86260e;
            text-align: center;
            margin-top: 1rem;
        }
        .no{
            font-size: .30rem;
            color: #e0483d;
            text-align: center;
            margin-top: .9rem;
        }
    }
}

